<template>
    <div id="login-container">
        <video class="video" muted="muted" src="../../assets/video/bgvideo.mp4" loop="loop" autoplay="autoplay"
            :autoplay="true"></video>
        <!-- <div class="bg2"></div> -->


        <!-- 常规登录 -->
        <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px"
            class="login-loginForm">
            <!-- 登录界面的大字 -->
            <!-- <h1 class="title">灭霸管理系统</h1> -->
            <!-- 二维码切换   切换二维码登录的控制条件 isErweiLogin-->
            <i @click="changeLoginType" :class="['jiaobiao', 'iconfont', Changejiaobiao]"></i>



            <!-- ----------------------------login常规登录------------------------------ -->
            <CommonLogin v-if="loginType === 'common'" @syncLoginForm="handleSyncLoginForm" @submit="submitForm"
                @changeSmsType="changeSmsType" ref="commonLogin"></CommonLogin>


            <!-- ---------------------------二维码登录----------------------------------- -->
            <qrLogin :storageUserInfo="storageUserInfo" v-else-if="loginType === 'qrcode'"></qrLogin>


            <!-- --------------------------短信验证码登录--------------------------------- -->
            <smsLogin :storageUserInfo="storageUserInfo" @changeCommonType="changeCommonType" v-else></smsLogin>
            <!-- <smsLogin :loginForm="loginForm"></smsLogin> -->

        </el-form>
    </div>
</template>
<script>
import CommonLogin from "../../components/Login/commonLogin.vue";
import smsLogin from "../../components/Login/smsLogin.vue";
import qrLogin from "../../components/Login/qrLogin.vue";
import * as api from '@/api/users';
import storage from "@/utils/storage";

export default {

    data() {
        //校验用户名
        var validateUsername = (rule, value, callback) => {
            // console.log(rule);
            // console.log(value);
            // 3 - 16个字母数字下划线
            var userNamePattern = /^[a-zA-Z0-9_-]{3,16}$/;
            // 如果校验通过,要直接回调callback()
            // 如果校验不通过, callback中传参数 
            if (userNamePattern.test(value)) {
                callback()
            } else {
                callback('请输入3-16位字母数字下划线')
            }

        };
        //校验密码
        var validatePassword = (rule, value, callback) => {
            // console.log(rule);
            // console.log(value);
            var passwordPattern = /^[a-zA-Z0-9_-]{3,16}$/;
            if (passwordPattern.test(value)) {
                callback();
            } else {
                callback("密码长度不能小于3位");
            }

        };
        //校验验证码
        var validateCaptcha = (rule, value, callback) => {
            // var captchaPattern = /^[A-Za-z0-9]{5}$/;
            // if (captchaPattern.test(value)) {
            //     callback();
            // } else {
            //     callback("验证码错误");
            // }
            if (value.length != 5) {
                callback('验证码必须是5位')
            } else {
                callback()
            }
        };
        return {
            //common 常规登录  |  qecode 二维码登录  |  sms短信验证码登录
            loginType: 'common',           //  登录方式-默认是常规登录页面
            loginForm: {
                username: '',
                password: '',
                captcha: ''
            },
            //表单验证规则
            rules: {
                username: [
                    { validator: validateUsername, trigger: 'blur' }
                ],
                password: [
                    { validator: validatePassword, trigger: 'blur' }
                ],
                captcha: [
                    { validator: validateCaptcha, trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        //更改成短信登录
        changeSmsType() {
            this.loginType = 'sms'
        },
        changeCommonType() {
            this.loginType = 'common'

        },
        //更改切换登录方式
        changeLoginType() {
            if (this.loginType === 'common') {
                this.loginType = 'qrcode'
            } else if (this.loginType === 'qrcode' || this.loginType === 'sms') {
                this.loginType = 'common'
            }
        },
        submitForm() {
            this.$refs["loginForm"].validate((valid) => {
                if (valid) {
                    // 登录
                    // 1.获取后台的验证码
                    // 2.进行本地校验
                    // 3.本地校验通过=>先校验验证
                    // 4.验证码通过再 校验用户名和密码
                    // 5.成功和失败
                    //本地校验通过
                    // alert('submit!');
                    api.verifyCaptcha(this.loginForm.captcha)
                        .then(async res => {
                            if (res.data.state) {
                                //验证通过，检验用户名和密码
                                let { username, password } = this.loginForm
                                let res = await api.loginApi(username, password)
                                // console.log(res);

                                //登陆成功
                                if (res.data.state) {
                                    //存储用户信息
                                    this.storageUserInfo(res.data)
                                    // 跳转到主页
                                    this.$router.push['/welcome']
                                }
                            } else {
                                //验证不通过，刷新验证码
                                this.$refs['commonLogin'].getCaptchas()
                            }

                        })
                } else {
                    // 本地校验不通过
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        handleSyncLoginForm(newLoginForm) {
            this.loginForm = newLoginForm
        },

        //封装一个方法用来存储用户的信息和token
        storageUserInfo({ userInfo, token, permission }) {
            //将信息存储到vuex
            this.$store.commit('users/SET_USER_INFO', userInfo)
            storage.set('userInfo', userInfo)
            storage.set('qf-token', token)
            storage.set('permission', permission)

            // let rr = storage.get('userInfo',)
            // console.log(rr);

        },


    },
    components: {
        CommonLogin,
        smsLogin,
        qrLogin,
    },
    computed: {
        Changejiaobiao() {
            if (this.loginType === 'common') {
                return 'icon-erweimajiaobiao'
            }
            if (this.loginType === 'qrcode' || this.loginType === 'sms') {
                return 'icon-diannaojiaobiao'
            }
        },

    },
}
</script>

<style lang="less" scoped>
/* //修改element-ui的样式
// 1.打开调试器，找准类名，覆盖样式
// 2.看权重，使用！important
// 3.使用深度选择器>>>  /deep/   */


* {
    margin: 0;
    padding: 0;
}

#app,
.login-container,
body,
html {
    height: 100%;
}

#login-container {
    text-align: center;
    color: #fff;
}

#login-container .video {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

#login-container .jiaobiao {
    font-size: 60px;
    color: #fff;
    position: absolute;
    right: -1px;
    top: -1px;
    cursor: pointer;
    opacity: .7;
}

.login-loginForm .title {
    margin: 0 0 60px 0;
    text-align: center;
    color: #fff;
}

.login-loginForm {
    position: fixed;
    right: 10%;
    top: 25%;
    border-radius: 5px;
    width: 400px;
    background-color: rgba(0, 0, 0, .3);
    padding: 100px 0 50px 0;
}

.common-login {
    padding-right: 50px;
}

.el-form-item {
    margin-bottom: 22px;
}

/deep/.el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #fff;
    line-height: 40px;
    padding: 0 12px 0 0;
    box-sizing: border-box;
}

/deep/.el-button {
    background: linear-gradient(90deg, #1596fb, #002dff);
    width: 250px;
}


.el-form-item__content {
    line-height: 40px;
    position: relative;
    font-size: 14px;
}
</style>